@import "_reset.scss";

.web {
    .logo {
        padding: 0;
        display: flex;
        align-items: center;
        margin-right: 10px;
        justify-content: center;
    }

    .navbar {
        position: relative;
        min-height: 50px;
        margin-bottom: 0px;
        border: 1px solid transparent;
        border-radius: 0;
    }

    .navar-fixed {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 99999;
    }


    .dynamic {
        padding-top: 92px;

        .container {
            .title {
                padding-bottom: 39px;

                p {
                    font-size: 30px;
                    color: #ff6b08;
                }
            }

            .New-icon {
                position: relative;

                img {
                    border-radius: 4px;
                    border: solid 1px #eeeeee;
                }

                .mask {
                    position: absolute;
                    text-align: center;
                    background-color: #000000;
                    opacity: 0.6;
                    bottom: 0;
                    padding: 10px 23px 10px 23px;

                    p {
                        font-size: 14px;
                        text-align: center;
                        color: #ffffff;


                    }
                }



            }

            .New-icon2 {
                position: relative;

                img {
                    border-radius: 4px;
                    border: solid 1px #eeeeee;
                }

                .mask {
                    position: absolute;
                    text-align: center;
                    background-color: #000000;
                    opacity: 0.6;
                    bottom: 0;
                    padding: 10px 21px 10px 23px;

                    p {
                        font-size: 14px;
                        text-align: center;
                        color: #ffffff;


                    }
                }



            }

            .New-icon3 {
                position: relative;

                img {
                    border-radius: 4px;
                    border: solid 1px #eeeeee;
                }

                .mask {
                    position: absolute;
                    text-align: center;
                    background-color: #000000;
                    opacity: 0.6;
                    bottom: 0;
                    padding: 10px 9px 10px 10px;

                    p {
                        font-size: 14px;
                        text-align: center;
                        color: #ffffff;


                    }
                }



            }
        }
    }

    .introduce {
        padding-top: 87px;
        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #ff6900;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;

                    background-color: #ff6900;
                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ffffff
                    }
                }
            }
        }
    }

    .introduce2 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon2.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce3 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon3.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce4 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon4.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce5 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon5.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce6 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon6.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce7 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon7.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce8 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon8.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .introduce9 {

        padding-bottom: 38px;

        .container {
            .Icon {
                width: 210px;
                height: 126px;
                background-position: left top;
                background-repeat: no-repeat;
                background-image: url(../img4/Icon9.png);
                margin-left: 15px;
            }

            .Icon-content {
                padding-left: 34px;

                h2 {
                    font-size: 18px;
                    color: #666666;
                    padding-bottom: 17px;
                }

                h3 {
                    font-size: 14px;
                    padding-bottom: 22px;
                    color: #2a2a2a;
                }

                h4 {
                    font-size: 14px;
                    line-height: 30px;
                    color: #2a2a2a;
                }

                .box {
                    width: 98px;


                    border-radius: 15px;
                    border: solid 1px #ff6900;
                    float: right;

                    p {
                        text-align: center;
                        line-height: 32px;
                        font-size: 14px;

                        color: #ff6900;
                    }
                }
            }
        }
    }

    .footer {
        background-color: #3b3b3b;
        padding-top: 35px;
        padding-bottom: 35px;

        .container {
            .footer-title {
                ul {
                    display: flex;

                    li {
                        font-size: 14px;

                        line-height: 21px;

                        color: #a1a3ab;
                        margin-right: 14px;

                        &:hover {
                            color: red;
                        }
                    }
                }


            }

            .footer-content {
                font-size: 11px;

                line-height: 21px;

                color: #a1a3ab;
            }

            .footer-Icon {
                width: 38px;
                height: 38px;
                background-image: url(../img/footer-Icon.png);
                background-position: center;
                background-repeat: no-repeat;
                margin-right: 20px;
            }

            .footer-Icon2 {
                width: 38px;
                height: 38px;
                background-image: url(../img/footer-Icon2.png);
                background-position: center;
                background-repeat: no-repeat;
                margin-right: 20px;
            }

            .footer-Icon3 {
                width: 38px;
                height: 38px;
                background-image: url(../img/footer-Icon3.png);
                background-position: center;
                background-repeat: no-repeat;
            }
        }
    }
}

@media screen and (min-width:768px) and (max-width:992px) {
    .navbar-nav li a {
        padding: 15px 5px;
    }
}

@media screen and (max-width: 768px) {
    .web {
        .dynamic {
            padding-top: 20px;

            .container {
                .title {
                    padding-bottom: 10px;
                }
            }
        }

        .introduce,
        .introduce2,
        .introduce3,
        .introduce4,
        .introduce5,
        .introduce6,
        .introduce7,
        .introduce8,
        .introduce9 {
            .container {
                .Icon {
                    margin: 0 auto;
                    margin-bottom: 20px;
                }
            }
        }
    }
}